<template>
	<w-app-page>
		<fx-header title="卡台" :showBackBtn="false">
		</fx-header>
		<div style="background: linear-gradient(90deg, #caffa5, transparent, #42e4f9);">
			<div style="display: flex;align-items: flex-end;margin-top: 50px;transform-origin: top left;transform: scale(0.75);">
				<div class="seat-wrapper">
					<div class="top">
					<div
						class="top_c"
						:class="statusClass(counterNo('C06')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('C06'))"
					>
						{{ counterNo("C06") ? counterNo("C06")?.counterNo : "C06" }}
					</div>
					<div
						class="top_v"
						:class="statusClass(counterNo('V08')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('V08'))"
					>
						{{ counterNo("V08") ? counterNo("V08")?.counterNo : "V08" }}
					</div>
					<div
						class="top_v"
						:class="statusClass(counterNo('V06')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('V06'))"
					>
						{{ counterNo("V06") ? counterNo("V06")?.counterNo : "V06" }}
					</div>
					<div
						class="top_v"
						:class="statusClass(counterNo('V03')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('V03'))"
					>
						{{ counterNo("V03") ? counterNo("V03")?.counterNo : "V03" }}
					</div>
					<div
						class="top_v"
						:class="statusClass(counterNo('V01')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('V01'))"
					>
						{{ counterNo("V01") ? counterNo("V01")?.counterNo : "V01" }}
					</div>
					<div
						class="top_c"
						:class="statusClass(counterNo('C03')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('C03'))"
					>
						{{ counterNo("C03") ? counterNo("C03")?.counterNo : "C03" }}
					</div>
					<!-- <div
						class="top_v"
						:class="statusClass(counterNo('888')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('888'))"
					>
						{{ counterNo("888") ? counterNo("888")?.counterNo : "888" }}
					</div> -->
					</div>
					<div class="mid">
					<div class="mid-l">
						<div class="mid-l_bar">
						<div class="mid-l_bar_l">
							<div
							class="mid-l_bar_l_c"
							:class="statusClass(counterNo('C12')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('C12'))"
							>
							{{ counterNo("C12") ? counterNo("C12")?.counterNo : "C12" }}
							</div>
							<div
							class="mid-l_bar_l_c"
							:class="statusClass(counterNo('C10')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('C10'))"
							>
							{{ counterNo("C10") ? counterNo("C10")?.counterNo : "C10" }}
							</div>
							<div
							class="mid-l_bar_l_c"
							:class="statusClass(counterNo('C08')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('C08'))"
							>
							{{ counterNo("C08") ? counterNo("C08")?.counterNo : "C08" }}
							</div>
						</div>
						<div class="mid-l_bar_r">
							<div
							class="mid-l_bar_r_c"
							:class="statusClass(counterNo('C11')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('C11'))"
							>
							{{ counterNo("C11") ? counterNo("C11")?.counterNo : "C11" }}
							</div>
							<div
							class="mid-l_bar_r_c"
							:class="statusClass(counterNo('C09')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('C09'))"
							>
							{{ counterNo("C09") ? counterNo("C09")?.counterNo : "C09" }}
							</div>
						</div>
						</div>
					</div>
					<div class="mid-m">
						<div class="mid-m__l">
						<div class="mid-m__l_c">
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T36')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T36'))"
							>
							{{ counterNo("T36") ? counterNo("T36")?.counterNo : "T36" }}
							</div>
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T33')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T33'))"
							>
							{{ counterNo("T33") ? counterNo("T33")?.counterNo : "T33" }}
							</div>
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T31')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T31'))"
							>
							{{ counterNo("T31") ? counterNo("T31")?.counterNo : "T31" }}
							</div>
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T29')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T29'))"
							>
							{{ counterNo("T29") ? counterNo("T29")?.counterNo : "T29" }}
							</div>
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T27')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T27'))"
							>
							{{ counterNo("T27") ? counterNo("T27")?.counterNo : "T27" }}
							</div>
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T23')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T23'))"
							>
							{{ counterNo("T23") ? counterNo("T23")?.counterNo : "T23" }}
							</div>
						</div>
						<div class="mid-m__l_v">
							<div
							class="mid-m__l_v_v"
							:class="statusClass(counterNo('T21')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T21'))"
							>
							{{ counterNo("T21") ? counterNo("T21")?.counterNo : "T21" }}
							</div>
							<div
							class="mid-m__l_v_v"
							:class="statusClass(counterNo('T17')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T17'))"
							>
							{{ counterNo("T17") ? counterNo("T17")?.counterNo : "T17" }}
							</div>
							<div
							class="mid-m__l_v_v"
							:class="statusClass(counterNo('T15')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T15'))"
							>
							{{ counterNo("T15") ? counterNo("T15")?.counterNo : "T15" }}
							</div>
							<div
							class="mid-m__l_v_v"
							:class="statusClass(counterNo('T12')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T12'))"
							>
							{{ counterNo("T12") ? counterNo("T12")?.counterNo : "T12" }}
							</div>
							<div
							class="mid-m__l_v_v"
							:class="statusClass(counterNo('T10')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T10'))"
							>
							{{ counterNo("T10") ? counterNo("T10")?.counterNo : "T10" }}
							</div>
						</div>
						<div class="mid-m__l_c">
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T50')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T50'))"
							>
							{{ counterNo("T50") ? counterNo("T50")?.counterNo : "T50" }}
							</div>
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T19')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T19'))"
							>
							{{ counterNo("T19") ? counterNo("T19")?.counterNo : "T19" }}
							</div>
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T08')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T08'))"
							>
							{{ counterNo("T08") ? counterNo("T08")?.counterNo : "T08" }}
							</div>
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T06')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T06'))"
							>
							{{ counterNo("T06") ? counterNo("T06")?.counterNo : "T06" }}
							</div>
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T03')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T03'))"
							>
							{{ counterNo("T03") ? counterNo("T03")?.counterNo : "T03" }}
							</div>
							<div
							class="mid-m__l_c_c"
							:class="statusClass(counterNo('T01')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T01'))"
							>
							{{ counterNo("T01") ? counterNo("T01")?.counterNo : "T01" }}
							</div>
						</div>
						</div>
						<div class="mid-m__r">
						<div class="mid-m__r_c">
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T39')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T39'))"
							>
							{{ counterNo("T39") ? counterNo("T39")?.counterNo : "T39" }}
							</div>
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T20')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T20'))"
							>
							{{ counterNo("T20") ? counterNo("T20")?.counterNo : "T20" }}
							</div>
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T09')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T09'))"
							>
							{{ counterNo("T09") ? counterNo("T09")?.counterNo : "T09" }}
							</div>
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T07')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T07'))"
							>
							{{ counterNo("T07") ? counterNo("T07")?.counterNo : "T07" }}
							</div>
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T05')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T05'))"
							>
							{{ counterNo("T05") ? counterNo("T05")?.counterNo : "T05" }}
							</div>
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T02')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T02'))"
							>
							{{ counterNo("T02") ? counterNo("T02")?.counterNo : "T02" }}
							</div>
						</div>
						<div class="mid-m__r_v">
							<div
							class="mid-m__r_v_v"
							:class="statusClass(counterNo('T22')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T22'))"
							>
							{{ counterNo("T22") ? counterNo("T22")?.counterNo : "T22" }}
							</div>
							<div
							class="mid-m__r_v_v"
							:class="statusClass(counterNo('T18')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T18'))"
							>
							{{ counterNo("T18") ? counterNo("T18")?.counterNo : "T18" }}
							</div>
							<div
							class="mid-m__r_v_v"
							:class="statusClass(counterNo('T16')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T16'))"
							>
							{{ counterNo("T16") ? counterNo("T16")?.counterNo : "T16" }}
							</div>
							<div
							class="mid-m__r_v_v"
							:class="statusClass(counterNo('T13')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T13'))"
							>
							{{ counterNo("T13") ? counterNo("T13")?.counterNo : "T13" }}
							</div>
							<div
							class="mid-m__r_v_v"
							:class="statusClass(counterNo('T11')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T11'))"
							>
							{{ counterNo("T11") ? counterNo("T11")?.counterNo : "T11" }}
							</div>
						</div>
						<div class="mid-m__r_c">
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T37')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T37'))"
							>
							{{ counterNo("T37") ? counterNo("T37")?.counterNo : "T37" }}
							</div>
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T35')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T35'))"
							>
							{{ counterNo("T35") ? counterNo("T35")?.counterNo : "T35" }}
							</div>
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T32')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T32'))"
							>
							{{ counterNo("T32") ? counterNo("T32")?.counterNo : "T32" }}
							</div>
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T30')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T30'))"
							>
							{{ counterNo("T30") ? counterNo("T30")?.counterNo : "T30" }}
							</div>
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T28')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T28'))"
							>
							{{ counterNo("T28") ? counterNo("T28")?.counterNo : "T28" }}
							</div>
							<div
							class="mid-m__r_c_c"
							:class="statusClass(counterNo('T26')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('T26'))"
							>
							{{ counterNo("T26") ? counterNo("T26")?.counterNo : "T26" }}
							</div>
						</div>
						</div>
					</div>
					<div class="mid-r">
						<div class="mid-r_l">DJ</div>
						<div style="display: flex;
						align-items: center;
						margin-left: 20px;
						padding: 20px;
						border: 1px solid gray;
						border-radius: 0 220px 220px 0;"
						>
						<div class="mid-r_m"></div>
						<div class="mid-r_r">
							<div
							class="mid-r_r__c1"
							:class="statusClass(counterNo('C01')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('C01'))"
							>
							{{ counterNo("C01") ? counterNo("C01")?.counterNo : "C01" }}
							</div>
							<div
							class="mid-r_r__c2"
							:class="statusClass(counterNo('A01')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('A01'))"
							>
							{{ counterNo("A01") ? counterNo("A01")?.counterNo : "A01" }}
							</div>
							<div
							class="mid-r_r__c3"
							:class="statusClass(counterNo('A02')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('A02'))"
							>
							{{ counterNo("A02") ? counterNo("A02")?.counterNo : "A02" }}
							</div>
							<div
							class="mid-r_r__c4"
							:class="statusClass(counterNo('A03')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('A03'))"
							>
							{{ counterNo("A03") ? counterNo("A03")?.counterNo : "A03" }}
							</div>
							<div
							class="mid-r_r__c5"
							:class="statusClass(counterNo('C02')?.counterStatus)"
							@click.stop="showDropdown($event, counterNo('C02'))"
							>
							{{ counterNo("C02") ? counterNo("C02")?.counterNo : "C02" }}
							</div>
						</div>
						</div>
					</div>
					</div>
					<div class="bot">
					<div
						class="bot_c"
						:class="statusClass(counterNo('C07')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('C07'))"
					>
						{{ counterNo("C07") ? counterNo("C07")?.counterNo : "C07" }}
					</div>
					<div
						class="bot_v"
						:class="statusClass(counterNo('V09')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('V09'))"
					>
						{{ counterNo("V09") ? counterNo("V09")?.counterNo : "V09" }}
					</div>
					<div
						class="bot_v"
						:class="statusClass(counterNo('V07')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('V07'))"
					>
						{{ counterNo("V07") ? counterNo("V07")?.counterNo : "V07" }}
					</div>
					<div
						class="bot_v"
						:class="statusClass(counterNo('V05')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('V05'))"
					>
						{{ counterNo("V05") ? counterNo("V05")?.counterNo : "V05" }}
					</div>
					<div
						class="bot_v"
						:class="statusClass(counterNo('V02')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('V02'))"
					>
						{{ counterNo("V02") ? counterNo("V02")?.counterNo : "V02" }}
					</div>
					<div
						class="bot_c"
						:class="statusClass(counterNo('C05')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('C05'))"
					>
						{{ counterNo("C05") ? counterNo("C05")?.counterNo : "C05" }}
					</div>
					</div>
					<div class="vip">
					<div
						class="vip_c"
						:class="statusClass(counterNo('111')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('111'))"
					>
						{{ counterNo("111") ? counterNo("111")?.counterNo : "111" }}
					</div>
					<div
						class="vip_c"
						:class="statusClass(counterNo('333')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('333'))"
					>
						{{ counterNo("333") ? counterNo("333")?.counterNo : "333" }}
					</div>
					<div
						class="vip_c"
						:class="statusClass(counterNo('555')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('555'))"
					>
						{{ counterNo("555") ? counterNo("555")?.counterNo : "555" }}
					</div>
					<div
						class="vip_c"
						:class="statusClass(counterNo('666')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('666'))"
					>
						{{ counterNo("666") ? counterNo("666")?.counterNo : "666" }}
					</div>
					<div
						class="vip_c"
						:class="statusClass(counterNo('888')?.counterStatus)"
						@click.stop="showDropdown($event, counterNo('888'))"
					>
						{{ counterNo("888") ? counterNo("888")?.counterNo : "888" }}
					</div>

					</div>
				</div>
				<!-- <div style="display: flex;justify-content:space-around;margin-top: 350px;margin-left: 100px;height:200px;font-size:14px;color:#333333;flex-direction:column;">
					<div style="display:flex;width: 150px;"><div class="chushi" style="width:50px;height:20px;"></div><span style="margin-left:15px;">初始状态</span></div>
					<div style="display:flex;width: 150px;"><div class="jingjia" style="width:50px;height:20px;"></div><span style="margin-left:15px;">竞价</span></div>
					<div style="display:flex;width: 150px;"><div class="jingjiajieshu" style="width:50px;height:20px;"></div><span style="margin-left:15px;">竞价结束</span></div>
					<div style="display:flex;width: 150px;"><div class="yuyue" style="width:50px;height:20px;"></div><span style="margin-left:15px;">预约</span></div>
					<div style="display:flex;width: 150px;"><div class="kaitai" style="width:50px;height:20px;"></div><span style="margin-left:15px;">开台</span></div>
					<div style="display:flex;width: 150px;"><div class="chaoshi" style="width:50px;height:20px;"></div><span style="margin-left:15px;">预约超时</span></div>
				</div> -->
			</div>
		</div>
		<Teleport to="body">
			<transition name="fade">
				<div
					v-if="showDropdownMenu && (isOpenTable || canOpenTable)"
					ref="dropdownRef"
					class="dropdown-menu"
					:style="{ top: targetY + 'px', left: targetX + 'px' }"
				>
					<div v-if="canOpenTable" class="dropdown-menu__wrapper">
						<div class="dropdown-menu__wrapper__item" @click="onOpenTableClick">开台</div>
					</div>
					<div v-if="isOpenTable" class="dropdown-menu__wrapper">
						<div
							class="dropdown-menu__wrapper__item"
							@click="onOrderClick"
						>
							点单
						</div>
						<div
							class="dropdown-menu__wrapper__item"
							@click="onGiveUpTableClick"
						>
							释放卡台
						</div>
					</div>
				</div>
			</transition>
		</Teleport>
		<a-modal v-model:open="openDialogVisible" centered title="开台" @ok="onOpenTableClickHandler" @cancel="onCancelOpenTableClickHandler" bodyStyle="text-align:center">
			客户：<a-select v-model="selectCustomerId" placeholder="请选择客户" style="width: 300px;" @change="onSelectCustomerIdChange">
				<a-select-option v-for="item in listData" :key="item.id" :value="item.id">{{ item.nameLabel }}</a-select-option>
			</a-select>
		</a-modal>
	</w-app-page>
</template>

<script setup name="TableBar">
import { useRouter } from 'vue-router'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import {
	getTableList,
	giveUpStage,
	openStage,
	getAllCustomerList
} from '@/js/api/bar.js'
import { getFxInstance } from '@/js/instance'
const router = useRouter()
const seatDetailList = ref([])
const fxInstance = getFxInstance()
const formatDate = (date) => {
	const year = date.getFullYear()
	const month = String(date.getMonth() + 1).padStart(2, '0')
	const day = String(date.getDate()).padStart(2, '0')
	return `${year}-${month}-${day}`
}
// const yesterday = ref("");
const today = ref('')
const now = new Date()
const adjustedNow = new Date(now.getTime() - 4 * 60 * 60 * 1000)
today.value = formatDate(new Date(adjustedNow.getTime()))
function getList () {
	const queryParams = ref({
		applyDate: today.value
	})
	getTableList(queryParams.value).then((response) => {
		console.log(response)
		seatDetailList.value = response.data
	})
}
const counterNo = computed(() => {
	return (val) => {
		return seatDetailList.value.find((seat) => seat.counterNo === val)
	}
})
const showDropdownMenu = ref(false)
const dropdownRef = ref(null)
const targetX = ref(0)
const targetY = ref(0)
const el = ref(null)
const tableDetail = ref({})
const isOpenTable = computed(() => {
	return tableDetail.value.counterStatus === 5
})
const canOpenTable = computed(() => {
	return tableDetail.value.counterStatus === 1 || tableDetail.value.counterStatus === 4
})
const statusClass = computed(() => {
	return (val) => {
		switch (val) {
			case 1:
				return 'chushi'
			case 2:
				return 'jingjia'
			case 3:
				return 'jingjiajieshu'
			case 4:
				return 'yuyue'
			case 5:
				return 'kaitai'
			case 6:
				return 'chaoshi'
			default:
				return '-'
		}
	}
})
const selectCustomerId = ref(null)
const openDialogVisible = ref(false)
function showDropdown (e, item) {
	if (item.id) {
		tableDetail.value = item
		el.value = e.currentTarget // 获取触发事件的元素
		const rect = el.value.getBoundingClientRect()
		targetX.value = rect.left
		targetY.value = rect.bottom
		console.log('rect', rect)
		showDropdownMenu.value = true
	}
}
// {{{ 点单
const onOrderClick = () => {
	router.push({
		path: '/order',
		query: {
			counterOrderNo: tableDetail.value.counterOrderNo,
			counterDetailId: tableDetail.value.counterDetailId,
			counterNo: tableDetail.value.counterNo
		}
	})
}
// }}}
const onOpenTableClick = () => {
	openDialogVisible.value = true
}
const onOpenTableClickHandler = () => {
	if (!selectCustomerId.value) {
		fxInstance.$fxMessage.error('请选择客户')
		return
	}
	fxInstance.$fxMessageBox.confirm('是否确认开台?').then(() => {
		openStage(tableDetail.value.id, selectCustomerId.value).then(res => {
			if (res.code === 200) {
				fxInstance.$fxMessage.success('开台成功')
				showDropdownMenu.value = false
				openDialogVisible.value = false
				getList()
			}
		})
	})
}
const onCancelOpenTableClickHandler = () => {
	selectCustomerId.value = null
	openDialogVisible.value = false
}
// {{{ 释放卡台
const onGiveUpTableClick = () => {
	fxInstance.$fxMessageBox.confirm('是否确认释放卡台?').then(() => {
		giveUpStage({
			counterOrderNo: tableDetail.value.counterOrderNo
		}).then(res => {
			if (res.code === 200) {
				fxInstance.$fxMessage.success('释放成功')
				showDropdownMenu.value = false
				getList()
			}
		})
	})
}
// }}}
const customerList = ref([])
const listData = ref([])
const getAllCustomer = () => {
	getAllCustomerList().then((response) => {
		customerList.value = []
		listData.value = response.data.map((item) => {
			return { ...item, nameLabel: `${item.customerName}-${item.phoneNumber}` }
		})
		console.log(listData.value)
	})
}
const onSelectCustomerIdChange = (val) => {
	selectCustomerId.value = val
}
let pollInterval = null
onMounted(() => {
	getList()
	getAllCustomer()
	pollInterval = setInterval(() => {
		getList()
	}, 10000)
})
onBeforeUnmount(() => {
	clearInterval(pollInterval)
})
</script>
<style lang="scss" scoped>
@import "@/assets/stylus/variables.module";
.wind-app-page {
	overflow: hidden;
	height: 100%;
}
.app-container {
	padding: 50px;
	.date-box {
		display: flex;
		justify-content: space-between;
		width:300px;
		.date-item {
			padding: 5px;
			border: 1px solid #999999;
			border-radius: 6px;
			cursor: pointer;
		}
		.selectedDate {
			color: #ffffff;
			background: #409EFF;
		}
	}
}
.seat-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
  padding: 20px;

//   border: 2px solid #999999;
  color: #000000;

//   background: linear-gradient(90deg, #caffa5, transparent, #42e4f9);
  flex-direction: column;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 80px;
    width: 610px;

    // margin-left: 95px;
    flex: 1;
    &_c {
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
    }
    &_v {
      width: 50px;
      height: 40px;
      line-height: 40px;
      border-radius: 8px;
      text-align: center;
      cursor: pointer;
    }
  }
  .mid {
    display: flex;
    flex: 8;
    flex-direction: row;
    align-items: center;

    // padding: 20px 0;
    &-l {
      border: 1px solid gray;
      &_bar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 20px;
        width: 150px;
        flex-direction: row;
        &_l {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 270px;
          flex-direction: column;
          &_c {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
          }
        }
        &_r {
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 190px;
          flex-direction: column;
          &_c {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
          }
        }

        // background: gray;
        // border-radius: 30px;

      }
    }
    &-m {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 20px;
      border: 1px solid gray;
      flex-direction: column;
      &__l {
        display: flex;
        justify-content: space-around;
        margin: 10px 10px 5px;
        padding: 10px;
        width: 700px;
        height: 210px;
        border: 1px solid gray;
        flex-direction: column;
        &_c {
          display: flex;
          justify-content: space-around;

          // flex: 1;
          align-items: center;
          width: 100%;

          // border: 2px solid #eeeeee;
          &_c {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;

            // background: greenyellow;
            cursor: pointer;
          }
          &_v {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;

            // background: greenyellow;
            cursor: pointer;
          }
        }
        &_v {
          display: flex;
          justify-content: space-around;

          // flex: 2;
          // flex-wrap: wrap;
          align-items: center;
          padding: 0 60px;

          // border: 2px solid #eeeeee;
          // margin-top: 10px;
          &_v {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;

            // background: greenyellow;
            cursor: pointer;
          }
        }
      }
      &__r {
        display: flex;
        justify-content: space-around;
        margin: 5px 10px 10px;
        padding: 10px;
        width: 700px;
        height: 210px;
        border: 1px solid gray;
        flex-direction: column;
        &_c {
          display: flex;
          justify-content: space-around;

          // flex: 1;
          align-items: center;
          width: 100%;

          // border: 2px solid #eeeeee;
          &_c {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            cursor: pointer;

            // background: lightblue;
          }
          &_v {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            cursor: pointer;

            // background: lightblue;
          }
        }
        &_v {
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0 60px;

          // flex: 2;
          flex-wrap: wrap;

          // border: 2px solid #eeeeee;
          // margin-top: 10px;
          &_v {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            cursor: pointer;

            // background: lightblue;
          }
        }
      }
    }
    &-r {
      display: flex;
      flex-direction: row;
      align-items: center;

      // border: 1px solid gray;
      &_l {
        width: 60px;
        height: 250px;
        border-radius: 120px 0 0 120px;
        text-align: center;
        background: #ffffff;
        line-height: 60px;
        writing-mode: vertical-rl;
        cursor: pointer;
      }
      &_m {
        margin-left: 30px;
        width: 50px;
        height: 120px;
        border-radius: 0 120px 120px 0;
        background: #ffffff;
      }
      &_r {
        display: flex;
        justify-content: space-around;
        height: 450px;
        flex-direction: column;
        &__c2 {
          margin-left: 35px;
          width: 50px;
          height: 60px;
          border: none;
          border-radius: 16px;
          text-align: center;
          line-height: 50px;
          transform: rotate(-40deg);
          writing-mode: vertical-rl;
          cursor: pointer;
        }
        &__c3 {
          margin-left: 80px;
          width: 50px;
          height: 60px;
          border: none;
          border-radius: 16px;
          text-align: center;
          line-height: 50px;
          transform: rotate(0deg);
          writing-mode: vertical-rl;
          cursor: pointer;
        }
        &__c4 {
          margin-left: 35px;
          width: 50px;
          height: 60px;
          border: none;
          border-radius: 16px;
          text-align: center;
          line-height: 50px;
          transform: rotate(40deg);
          writing-mode: vertical-rl;
          cursor: pointer;
        }
        &__c1 {
          margin-left: -35px;
          width: 60px;
          height: 60px;
          border: none;
          border-radius: 50%;
          text-align: center;
          line-height: 60px;
          cursor: pointer;
        }
        &__c5 {
          margin-left: -35px;
          width: 60px;
          height: 60px;
          border: none;
          border-radius: 50%;
          text-align: center;
          line-height: 60px;
          cursor: pointer;
        }
      }
      .circle {
        position: absolute;
        right: 354px;
        width: 320px;
        height: 701px;
        border: 30px solid #999999;
        border-left: transparent;
        border-radius: 0 400px 400px 0;
      }
    }
  }
  .bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 80px;
    width: 610px;

    // margin-left: 95px;
    flex: 1;
    &_c {
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
    }
    &_v {
      width: 50px;
      height: 40px;
      line-height: 40px;
      border-radius: 8px;
      text-align: center;
      cursor: pointer;
    }
  }
  .vip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px 30px;
    width: 70%;
    border: 1px solid gray;
    &_c {
      width: 70px;
      height: 50px;
      line-height: 50px;
      border-radius: 8px;
      text-align: center;
      cursor: pointer;
    }
  }
}
.dropdown-menu {
  position: absolute;
  z-index: 99;
  width: 150px;
  border: 1px solid #999999;
  border-radius: 8px;
  background: #ffffff;
  line-height: 30px;
  &__wrapper {
    display: flex;
    flex-direction: column;
    &__item {
      width: 100%;
      border-top: 1px solid #999999;
      text-align: center;
      cursor: pointer;
    }
  }
}
.chushi {
  border: 1px solid gray;
  background: #FFFFFF;
}
.jingjia {
  border: 1px solid gray;
  background: yellow;
}
.jingjiajieshu {
  border: 1px solid gray;
  background: lightblue;
}
.yuyue {
  border: 1px solid gray;
  background: #FEC171;
}
.kaitai {
  border: 1px solid gray;
  background: green;
}
.chaoshi {
  border: 1px solid gray;
  background: red;
}
</style>
